<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(255,178,110)'}' opacity='.15' /%3E%3Cpath d='M224.907636 484.410182l114.338909 86.656 51.921455-159.767273-143.36 3.048727a39.028364 39.028364 0 0 0-22.912 70.050909' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(247,192,85)'}' opacity='.5' /%3E%3Cpath d='M727.133091 742.353455l-41.611636-137.821091-136.296728 99.072 118.167273 82.269091a39.074909 39.074909 0 0 0 59.741091-43.52' fill='${(isStr.value ? colors.value : colors.value[2]) || 'rgb(247,192,85)'}' opacity='.5' /%3E%3Cpath d='M771.607273 405.434182l-160.581818-3.246546-52.701091-151.749818a43.636364 43.636364 0 0 0-82.466909 0l-52.689455 151.749818-58.007273 178.676364-46.545454 153.669818a43.706182 43.706182 0 0 0 66.804363 48.488727l131.909819-91.822545 151.947636-110.545455 127.895273-96.965818a43.531636 43.531636 0 0 0-25.6-78.266182' fill='${(isStr.value ? colors.value : colors.value[3]) || 'rgb(247,192,85)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
